﻿<div class="container-aboutUs" ng-controller="ContactUsController" ng-init="init()">
    <div class="row">
        <div class="col-sm-3 col-lg-3">
            <div class="panel">
                <div class="panel-body">
                    <address>
                        <strong>{{item.address.email_label}}</strong> <a href="mailto:{{item.address.email}}">{{item.address.email}}</a>
                        <br />
                        <strong>{{item.address.location}}</strong>
                        <div ng-repeat="itm in item.address.region">
                            <div>{{itm.title}}</div>
                            <blockquote>
                                <div ng-bind-html="itm.address"></div>
                                <div>{{item.caption.phone}}: {{itm.phone}}</div>
                                <a href="javascript:void(0)" ng-click="loadMap(itm)" ng-class="{'text-red':itm.showMap}"><strong>{{itm.showMap?item.caption.sendMessage:item.caption.map}}</strong></a>
                            </blockquote>
                        </div>
                    </address>
                </div>
            </div>

        </div>
        <div class="col-sm-9 col-lg-9">
            <div class="panel panel-map" ng-show="isShowMap">
                <div id="googleMaps" style="width:100%; height:490px;background: #ccc url(images/loading.gif) center no-repeat;"></div>
            </div>
            <div class="panel" ng-hide="isShowMap">

                <div class="panel-heading">
                    <h3 style="margin:0;">{{item.caption.header}}</h3>
                </div>
                <div class="panel-body">
                    <!-- CONTACT FORM https://github.com/jonmbake/bootstrap3-contact-form -->

                    <form name="contactUsForm" ng-submit="submitForm('contactUsForm')" ng-init="setForm('contactUsForm')" novalidate>
                        <div class="form-group" ng-class="{ 'has-error' : contactUsForm.name.$invalid && !contactUsForm.name.$pristine }">
                            <div class="input-group">
                                <div class="input-group-addon"><i class="fa fa-user"></i></div>
                                <input type="text" class="form-control" name="name" tabindex="1" placeholder="{{item.placeholder.name}}" directive-auto-focus ng-model="data.name" required ng-minlength="6">
                            </div>
                            <span ng-show="contactUsForm.name.$error.required && !contactUsForm.name.$pristine" class="help-block">{{item.error.required.name}}</span>
                            <span ng-show="contactUsForm.name.$error.minlength" class="help-block">{{item.error.minlength.name}}</span>
                        </div>

                        <div class="form-group" ng-class="{ 'has-error' : contactUsForm.email.$invalid && !contactUsForm.email.$pristine }">
                            <div class="input-group">
                                <div class="input-group-addon"><i class="fa fa-at"></i></div>
                                <input type="email" class="form-control" name="email" tabindex="2" placeholder="{{item.placeholder.email}}" ng-model="data.email" ng-pattern="/^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+.[a-z0-9-]/" required ng-minlength="6">
                            </div>
                            <p ng-show="contactUsForm.email.$error.required && !contactUsForm.email.$pristine" class="help-block">{{item.error.required.email}}</p>
                            <p ng-show="contactUsForm.email.$error.pattern " class="help-block">{{item.error.valid.email}}</p>
                        </div>
                        <div class="form-group" ng-class="{ 'has-error' : contactUsForm.phone.$invalid && !contactUsForm.phone.$pristine }">
                            <div class="input-group input-group-tel">
                                <div class="input-group-addon"><i class="fa fa-phone"></i></div>
                                <input type="text" class="form-control" name="phone" tabindex="3" placeholder="{{item.placeholder.phone}}" directive-mask-phone ng-model="data.phone">
                            </div>
                        </div>
                        <div class="form-group" ng-class="{ 'has-error' : contactUsForm.message.$invalid && !contactUsForm.message.$pristine }">
                            <div class="input-group">
                                <div class="input-group-addon"><i class="fa fa-pencil"></i></div>
                                <textarea rows="9" cols="100" class="form-control" name="message" tabindex="4" placeholder="{{item.placeholder.message}}" ng-model="data.messages" required ng-minlength="20" directive-next-end-index="contactUsForm"></textarea>
                            </div>
                            <span ng-show="contactUsForm.message.$error.required && !contactUsForm.message.$pristine" class="help-block">{{item.error.required.message}}</span>
                            <span ng-show="contactUsForm.message.$error.minlength" class="help-block">{{item.error.minlength.message}}</span>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary" tabindex="5" directive-end-index="contactUsForm" ng-disabled="contactUsForm.$invalid"><span class="fa fa-envelope" aria-hidden="true"></span>&nbsp;&nbsp;{{item.caption.submit}}</button>
                            &nbsp;&nbsp;<span>{{item.caption.requiredFields}}</span>
                        </div>
                    </form>
                    <!-- END CONTACT FORM -->
                </div>
            </div>
        </div>
    </div>
</div>
